import React from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';

// 路由路径常量
export const ROUTES = {
  LOGIN: '/login',
  HOME: '/home',
  EXPERTS: '/experts',
  CART: '/cart',
  USER: '/user',
  ORDERS: '/orders',
  ORDER_DETAIL: '/orders/detail/:orderNo',
  SETTINGS: '/settings',
  PRODUCTS: '/products'
};

// Tabbar配置
export const TABBAR_CONFIG = [
    { path: '/home', title: '首页', icon: 'Home' },
    { path: '/products', title: '全部商品', icon: 'Hi' },
    { path: '/experts', title: '专家|技师', icon: 'Hi' },
    { path: '/cart', title: '购物车', icon: 'Cart' },
    { path: '/user', title: '我的', icon: 'User' },
];

// 根据路径获取Tabbar索引
export const getTabIndexByPath = (pathname) => {
    const index = TABBAR_CONFIG.findIndex(config => config.path === pathname);
    return index >= 0 ? index : 0;
};

// 根据Tabbar索引获取路径
export const getPathByTabIndex = (tabIndex) => {
    return TABBAR_CONFIG[tabIndex]?.path || '/home';
};

// 动态导入组件
const Login = React.lazy(() => import('@/views/login'));
const Layout = React.lazy(() => import('@/views/layout/Layout'));
const Index = React.lazy(() => import('@/views/index'));
const Experts = React.lazy(() => import('@/views/experts'));
const Cart = React.lazy(() => import('@/views/cart'));
const User = React.lazy(() => import('@/views/user'));
const Orders = React.lazy(() => import('@/views/orders'));
const OrderDetail = React.lazy(() => import('@/views/orders/detail'));
const Settings = React.lazy(() => import('@/views/settings'));
const Products = React.lazy(() => import('@/views/products'));

// 路由配置
export const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Index />
      },
      {
        path: 'home',
        element: <Index />
      },
      {
        path: 'experts',
        element: <Experts />
      },
      {
        path: 'cart',
        element: <Cart />
      },
      {
        path: 'user',
        element: <User />
      }
    ]
  },
  {
    path: '/orders',
    element: <Orders />
  },
  {
    path: '/orders/detail/:orderNo',
    element: <OrderDetail />
  },
  {
    path: '/settings',
    element: <Settings />
  },
  {
    path: '/products',
    element: <Products />
  },
  {
    path: '*',
    element: <Navigate to="/" replace />
  }
]);